<template>
    <div class="user-management">
        <a-card :bordered="false" :bodyStyle="{padding: 0}">
            <!-- 操作按钮区域 -->
            <div class="ant-pro-table-toolbar">
                <div class="ant-pro-table-toolbar-title">项目监测管理</div>
                <div class="ant-pro-table-toolbar-option">
                <a-button v-has="'sys:organization:add'" type="primary" icon="plus" @click="handleAdd()">新建</a-button>
                </div>
            </div>

            <!--数据表格区域-->
            <div class="ant-pro-table-wrapper">
                <a-table
                    ref="table"
                    size="middle"
                    :rowKey="rowKey"
                    :columns="columns"
                    :dataSource="dataSource"
                    :loading="loading"
                    :pagination="pagination"
                    @change="handleTableChange"
                >
                <template slot="isEnable-slot" slot-scope="record">
                    <span>{{getName(record)}}</span>
                </template>
                <template slot="expandIcon">
                    <a-icon type="caret-down"/>
                </template>

                <template slot="action-slot" slot-scope="text, record">
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm 
                                title="确认要删除吗？"
                                @confirm="() => handleDel(record)">
                    <a href="javascript:">删除</a>
                    </a-popconfirm>
                </template>
                </a-table>
            </div>
        </a-card>

        <!--表单页面-->
        <div v-if="visible">
            <a-modal
                :title="addFlag ? '新增' : '修改'"
                :visible="visible"
                @ok="handleSubmit"
                @cancel="handleClose"
                :confirmLoading="submitLoading"
                :maskClosable="false"
                :bodyStyle="{ padding: '12px 18px' }"
                :centered="true"
            >
                <a-form-model
                    @submit="handleSubmit"
                    :rules="rules"
                    :model="form"
                    ref="ruleForm"
                >
                    <a-form-model-item style="display: none">
                        <a-input v-model="form.id" />
                    </a-form-model-item>
                    <a-form-model-item label="指标名称" prop="standardName">
                        <a-input placeholder="请输入" v-model="form.standardName" />
                    </a-form-model-item>
                    <a-form-model-item label="指标编号" >
                        <a-input placeholder="请输入" v-model="form.standardCode" />
                    </a-form-model-item>
                    <a-form-model-item label="阀值上限" >
                        <a-input placeholder="请输入" v-model="form.upperLimit" />
                    </a-form-model-item>
                    <a-form-model-item label="阀值下限" >
                        <a-input placeholder="请输入" v-model="form.lowerLimit" />
                    </a-form-model-item>
                    <a-form-model-item label="指数单位" >
                        <a-input placeholder="请输入" v-model="form.standardUnit" />
                    </a-form-model-item>
                    <a-form-model-item label="排序">
                        <a-input-number
                            style="width: 100%"
                            placeholder="按数值由小到大升序"
                            v-model = "form.sort"/>
                    </a-form-model-item>
                    <a-form-model-item label="所属告警类型">
                        <a-select v-model="form.warningCode">
                            <a-select-option v-for="item in warningCodeList" :key="item.warningCode">
                                {{item.warningName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>    
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            submitLoading:false,
            dataSource:[],
            rowKey: 'id',
            columns:[
                {
                    title: "序号",
                    dataIndex: "index",
                    align: "center",
                },
                {
                    title: "指数名称",
                    dataIndex: "standardName",
                    align: "center",
                },
                {
                    title: "指数编号",
                    dataIndex: "standardCode",
                    align: "center",
                },
                {
                    title: "指数上限",
                    dataIndex: "upperLimit",
                    align: "center",
                },
                {
                    title: "指数下限",
                    dataIndex: "lowerLimit",
                    align: "center",
                },
                {
                    title: "指数单位",
                    dataIndex: "standardUnit",
                    align: "center",
                },
                {
                    title: "排序",
                    dataIndex: "sort",
                    align: "center",
                },
                {
                    title: "所属告警类型",
                    dataIndex: "warningCode",
                    align: "center",
                    scopedSlots: { customRender: "isEnable-slot" },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    width: '150px',
                    scopedSlots: { customRender: 'action-slot' }
                }
            ],
            pagination: {// 分页器设置
                total: 0,
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                }
            },
            visible:false,
            addFlag:true,
            form:{
                id:"",
                standardName:"",
                standardCode:"",
                upperLimit:"",
                lowerLimit:"",
                standardUnit:"",
                sort:"",
                warningCode:""
            },
            rules:{
                standardName:[{required: true, message: '请输入名称', trigger: 'blur'}]
            },
            warningCodeList:[]

        }
    },
    created(){
        this.getPcode();
        this.serach();
    },
    methods:{
        getName(record){
            for(let i=0;i<this.warningCodeList.length;i++){
                if(record == this.warningCodeList[i].warningCode){
                    return this.warningCodeList[i].warningName;
                }
            }
        },
        getPcode(){
            const data ={
                warnType:{}
            }
            this.$http('/rapid/warningType/getWarningTypeList',data).then(res =>{
                if(res.code === 200){
                    this.warningCodeList = res.result;
                }
            })
        },
        serach(){
            this.pagination.current = 1;
            this.init();
        },
        init(){
            this.tableShow = true
            const data = {
                pageVo: {
                    pageNumber: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                },
                standardInfo: {
                    ...this.queryParam,
                },
            };
            this.$http('/rapid/standardInfo/getPage',data).then(res =>{
                if(res.code === 200){
                    this.dataSource = res.result.records;
                    for(let i =0;i<res.result.records.length;i++){
                        this.dataSource[i].index = i+1
                    }
                    this.pagination.total = !isNaN(res.result.total) ? Number(res.result.total) : 0
                }
            })
        },
        handleTableChange (pagination) {
            this.pagination = pagination;
            this.init();
         },
        handleAdd(){
            this.visible = true;
            this.addFlag = true;
            this.getPcode();
        },
        handleEdit(data){
            this.getPcode();
            this.visible = true;
            this.addFlag = false;
            this.form = data;
        },
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) =>{
                if(valid){
                    this.$http('/rapid/standardInfo/saveOrUpdate',this.form).then(res =>{
                        if(res.code === 200){
                            this.$message.success('更新完成！')
                            this.getPcode();
                            this.handleClose();
                        }
                    })
                }else{
                    this.$message.error("请填写必填项")
                    return false;
                }
            })
        },
        handleDel(data){
            this.$http('/rapid/standardInfo/delete',data).then(res =>{
                if(res.code === 200){
                    this.$message.success("删除成功")
                    this.getPcode();
                    this.init();
                }
            })
        },
        handleClose(){
            this.visible = false;
            this.form = {};
            this.init();
        },
    },
    // watch:{
    //     warningCodeList:{
    //         handler(val){
    //             console.log(val, 'watcher')
    //         },
    //         deep:true
    //     }
    // }
}
</script>



<style scoped lang="less">
.user-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}

.expandIcon {
  margin-right: 8px
}

.leafNode {
  padding-left: 14px;
}
</style>